<template>
  <div id="archive">
    <div class="article-sort-title">
      文章总览 - {{ total }}
    </div>
    <div class="article-sort">
      <div class="article-sort-item year">
        2020
      </div>
      <div
        v-for="item in list"
        :key="item.hid"
        class="article-sort-item"
      >
        <div class="article-sort-post">
          <router-link
            class="article-sort-item__post"
            :to="{path:'/posts/'+item.hid}"
          >
            <i
              class="fa fa-clock-o"
              aria-hidden="true"
            />
            <time
              class="article-sort-item__time"
            >{{ item.archives }}
            </time>
            <div class="article-sort-item__title">
              {{ item.title }}
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <nav id="pagination">
      <div class="pagination">
        <pagination :total="total" :limit="listQuery.size" @getNew="fetchData"/>
      </div>
    </nav>
  </div>
</template>

<script>
  import {archivesList, archivesConditionList} from '@/api/archives'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'Archives',
    components: {Pagination},
    data() {
      return {
        list: [],
        total: 0,
        listQuery: {
          page: 0,
          size: 10,
          condition: ''
        }
      }
    },
    created() {
      document.title = '归档'
      const condition = this.$route.params.archives
      const name = this.$route.name
      if (name === 'archives') {
        this.getArchivesList()
      }
      if (name === 'archives:archive') {
        this.getArchivesConditionList(condition)
      }
    },
    methods: {
      fetchData(v) {
        this.listQuery.page = v === undefined ? 0 : v
        const condition = this.$route.params.archives
        const name = this.$route.name
        if (name === 'archives') {
          this.getArchivesList()
        }
        if (name === 'archives:archive') {
          this.getArchivesConditionList(condition)
        }
      },
      getArchivesList() {
        archivesList(this.listQuery).then(response => {
          if (response.data.code === 20000) {
            this.list = response.data.payload.list
            this.total = response.data.payload.total
          }
        })
      },
      getArchivesConditionList(condition) {
        this.listQuery.condition = condition
        archivesConditionList(this.listQuery).then(response => {
          if (response.data.code === 20000) {
            this.list = response.data.payload.list
            this.total = response.data.payload.total
          }
        })
      }
    }
  }
</script>
